<template>
  <div class="single-player-rank">
    <div class="player-rank-title">
      <div class="my-tab-pane">
        <el-tabs v-model="activeName">
          <el-tab-pane label="进球" name="goal"/>
          <el-tab-pane label="助攻" name="assist"/>
          <el-tab-pane label="传球" name="pass"/>
          <el-tab-pane label="触球" name="touch"/>
          <el-tab-pane label="盘带" name="dribble"/>
          <el-tab-pane label="犯规" name="foul"/>
        </el-tabs>
      </div>
    </div>
    <GoalRank :playerId="playerId" :season="season" v-show="activeName==='goal'"/>
    <AssistRank :playerId="playerId" :season="season" v-show="activeName==='assist'"/>
    <PassRank :playerId="playerId" :season="season" v-show="activeName==='pass'"/>
    <TouchRank :playerId="playerId" :season="season" v-show="activeName==='touch'"/>
    <DribbleRank :playerId="playerId" :season="season" v-show="activeName==='dribble'"/>
    <FoulRank :playerId="playerId" :season="season" v-show="activeName==='foul'"/>
  </div>
</template>

<script>
  import GoalRank from "./goalRank/GoalRank";
  import AssistRank from "./assistRank/AssistRank";
  import PassRank from "./passRank/PassRank";
  import TouchRank from "./touchRank/TouchRank";
  import DribbleRank from "./dribbleRank/DribbleRank";
  import FoulRank from "./foulRank/FoulRank";
  export default {
    name: "personalRank",
    props:{
      playerId:{
        type:Number
      },
      season:{
        type:String,
        default(){
          return '2019赛季'
        }
      }
    },
    components:{
      GoalRank,
      AssistRank,
      PassRank,
      TouchRank,
      DribbleRank,
      FoulRank
    },
    data(){
      return {
        activeName:'goal'
      }
    }
  }
</script>

<style scoped>
  .single-player-rank {
   width:  1440px;
   height: 677px;
   margin: 30px auto 0;
   background-color: #f1f6f9;
 }
  .player-rank-title {
    width: 100%;
    height: 50px;
    background-color: #194568;
  }
  .my-tab-pane {
    margin-right: 20px;
    float: right;
  }
  .player-rank-title /deep/ .el-tabs__item {
    color: white;
    font-size: 25px;
    font-weight: bold;
  }
  .player-rank-title /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }
  .player-rank-title /deep/ .el-tabs__active-bar {
    height: 3px;
    background-color: #16C79A;
  }
  .player-rank-title /deep/ .el-tabs__item:hover {
    color: #16C79A;
  }
  .player-rank-title /deep/ .el-tabs__item.is-active {
    color: #16C79A;
  }
</style>